{template 'header'}
<style type="text/css">
a{
    text-decoration: none;
}
.my-page {
    background-color:#f7f5f5;
}
.my-page .avatar-wrap {
    padding:28px;
    position:relative;
    -webkit-align-items:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
}
.my-page .avatar {
    width:70px;
    height:70px;
    border-radius:100%;
    overflow:hidden;
    margin-right:20px;
    -webkit-flex-shrink:0;
    -ms-flex-negative:0;
    flex-shrink:0;
}
.my-page .student-info {
    width:calc(100% - 140px);
}
.my-page .student-info .name {
    color:#fff;
    font-size:18px;
    font-weight:500;
}
.my-page .student-info .sno {
    color:#fff;
    margin-top:8px;
    -webkit-letter-spacing:1px;
    -moz-letter-spacing:1px;
    -ms-letter-spacing:1px;
    letter-spacing:1px;
}
.my-page .student-card {
    width:0.71rem;
    height:0.22rem;
    color:#FE5264;
    font-size:0.14rem;
    position:absolute;
    background-color:#FFF357;
    right:0;
    margin-top:-0.11rem;
    top:50%;
    border-top-left-radius:0.11rem;
    border-bottom-left-radius:0.11rem;
    padding-left:4px;
}
.my-page .student-card img {
    width:9px;
    height:9px;
    margin-left:2px;
}
.my-page .menu {
    margin-bottom:70px;
}
.my-page .menu ul a, .my-page .menu ul div {
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    height:64px;
    border-bottom:1px #f0f0f0 solid;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-align-items:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    padding-left:13px;
    color:#333;
    -webkit-text-decoration:none;
    text-decoration:none;
    line-height:48px;
    font-size:16px;
    background-color:#fff;
}
.my-page .menu ul a img, .my-page .menu ul div img {
    height:19px;
    width:19px;
    vertical-align:middle;
}
.my-page .menu ul a .arrow, .my-page .menu ul div .arrow {
    margin-right:15px;
}
.my-page .menu ul a:active {
    background:#ececec;
}
.my-page .menu ul .my-li-ctx {
    -webkit-flex:1;
    -ms-flex:1;
    flex:1;
    padding-left:13px;
    vertical-align:middle;
    color:#333;
    -webkit-text-decoration:none;
    text-decoration:none;
    line-height:64px;
}
.my-page .menu ul .my-li-ctx .tab-new {
    width:39px;
    margin-left:8px;
    margin-top:-14px;
}
.my-page .menu ul .wallet-price {
    margin-right:8px;
    position:relative;
    color:#6A7FA5;
    font-size:0.14rem;
    -webkit-letter-spacing:1px;
    -moz-letter-spacing:1px;
    -ms-letter-spacing:1px;
    letter-spacing:1px;
}
.my-page .menu ul .grow-balance {
    margin-right:8px;
    color:#6A7FA5;
    font-size:0.14rem;
    -webkit-letter-spacing:1px;
    -moz-letter-spacing:1px;
    -ms-letter-spacing:1px;
    letter-spacing:1px;
}
.mem-my-page {
    background-color:#fff;
}
.mem-my-page .header {
    position:relative;
    height:200px;
}
.mem-my-page .header .my1 {
    height:200px;
    width:100%;
}
.mem-my-page .header .user-wrap {
    position:absolute;
    width:84%;
    left:50%;
    -webkit-transform:translateX(-50%);
    -ms-transform:translateX(-50%);
    transform:translateX(-50%);
    top:73px;
}
.mem-my-page .header .user-wrap .my2 {
    width:100%;
    height:117px;
}
.mem-my-page .header .user-wrap .user-pic-wrap {
    position:absolute;
    width:50px;
    height:50px;
    left:50%;
    top:-35px;
    border-radius:50%;
    -webkit-transform:translateX(-50%);
    -ms-transform:translateX(-50%);
    transform:translateX(-50%);
}
.mem-my-page .header .user-wrap .user-pic-wrap .user-pic {
    width:100%;
    height:100%;
    border-radius:50%;
}
.mem-my-page .header .user-wrap .user-pic-wrap .crown {
    position:absolute;
    width:28px;
    left:9px;
    top:-20px;
}
.mem-my-page .header .user-wrap .user-name {
    position:absolute;
    top:24px;
    width:100%;
    color:#fff;
    -webkit-letter-spacing:1px;
    -moz-letter-spacing:1px;
    -ms-letter-spacing:1px;
    letter-spacing:1px;
    text-align:center;
    font-weight:600;
    font-size:16px;
}
.mem-my-page .header .user-wrap .user-sno {
    position:absolute;
    top:46px;
    width:100%;
    color:#fff;
    -webkit-letter-spacing:1px;
    -moz-letter-spacing:1px;
    -ms-letter-spacing:1px;
    letter-spacing:1px;
    text-align:center;
    font-size:15px;
}
.mem-my-page .header .user-wrap .endtime {
    position:absolute;
    top:70px;
    width:100%;
    color:#fff;
    -webkit-letter-spacing:1px;
    -moz-letter-spacing:1px;
    -ms-letter-spacing:1px;
    letter-spacing:1px;
    text-align:center;
    font-size:12px;
}
.mem-my-page .header .content-top {
    position:absolute;
    bottom:0;
    height:35px;
    width:100%;
}
.mem-my-page .header .content-top img {
    width:100%;
    height:100%;
}
.mem-my-page .menu {
    background:#fff;
}
.mem-my-page .menu ul a {
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    height:48px;
    border-bottom:1px #f0f0f0 solid;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-align-items:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    padding-left:13px;
    color:#333;
    -webkit-text-decoration:none;
    text-decoration:none;
    line-height:48px;
    font-size:15px;
}
.mem-my-page .menu ul a img {
    height:19px;
    width:19px;
    vertical-align:middle;
}
.mem-my-page .menu ul a .arrow {
    margin-right:15px;
}
.mem-my-page .menu ul a:active {
    background:#ececec;
}
.mem-my-page .menu .my-li-ctx {
    -webkit-flex:1;
    -ms-flex:1;
    flex:1;
    padding-left:13px;
    vertical-align:middle;
    color:#333;
    -webkit-text-decoration:none;
    text-decoration:none;
    line-height:44px;
}
.my-read-note-page .all-read-note .note-item {
    background-color:rgb(255, 255, 255);
    padding:30px 20px;
    margin:0px auto 1px;
    max-width:480px;
    display:block;
}
.my-read-note-page .all-read-note .note-item .note-head {
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
    -webkit-justify-content:space-between;
    -ms-flex-pack:justify;
    justify-content:space-between;
    -webkit-align-items:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    margin-bottom:18px;
}
.my-read-note-page .all-read-note .note-item .note-head p {
    color:rgb(74, 74, 74);
    font-size:14px;
    font-weight:bold;
    width:100%;
}
.my-read-note-page .all-read-note .note-item .note-content {
    background-color:rgb(246, 246, 246);
    padding:15px 12px;
    border-radius:10px;
    margin-bottom:17px;
}
.my-read-note-page .all-read-note .note-item .note-content pre {
    color:rgb(74, 74, 74);
    font-size:14px;
    -webkit-letter-spacing:1px;
    -moz-letter-spacing:1px;
    -ms-letter-spacing:1px;
    letter-spacing:1px;
}
.my-read-note-page .all-read-note .note-item .note-footer p {
    color:rgb(155, 155, 155);
    font-size:14px;
    text-align:right;
}
.my-read-note-page .all-read-note .note-item .note-footer div {
    color:rgb(155, 155, 155);
    font-size:14px;
    line-height:18px;
    position:relative;
}
.my-read-note-page .all-read-note .note-item .note-footer div img {
    width:16px;
    margin-right:8px;
}
.my-read-note-page .all-read-note .note-item .note-footer div .like-block {
    width:30px;
    top:-40px;
    position:absolute;
    right:-5px;
}
.my-read-note-page .all-read-note .note-item .note-footer div .like-block img {
    width:100%;
}
.my-read-note-page .all-read-note .note-item .note-footer div .like-block span {
    position:absolute;
    top:0px;
    left:0px;
    color:rgb(255, 255, 255);
    display:inline-block;
    width:100%;
    text-align:center;
    line-height:17px;
    font-size:0.12rem;
}
.my-read-note-page .no-note {
    background-color:rgb(255, 255, 255);
    text-align:center;
    height:100vh;
}
.my-read-note-page .no-note img {
    width:240px;
    margin-top:60px;
}
.my-read-note-page .no-note .no-note-tip {
    color:rgb(74, 74, 74);
    font-size:19px;
    font-weight:bold;
    margin-top:25px;
}
.my-read-note-page .no-note .to-public-note {
    color:rgb(155, 155, 155);
    font-size:16px;
    margin-top:17px;
}
.my-read-note-page .no-note .public-btn {
    text-align:center;
    position:fixed;
    bottom:68px;
    left:0px;
    right:0px;
    margin:auto;
    max-width:400px;
}
</style>
    <div class="my-read-note-page">
        <div class="all-read-note">
        </div>
        <div class="no-note" style="display: none;">
	        <img src="{RES}img/noting.png">
	        <p class="no-note-tip">暂无学习笔记</p>
	        <p class="to-public-note">发表学习笔记，记录每天成长</p>
	        <div class="" style="display: inherit;">
	            <a href="{php echo $this->murl('blisten')}" class="g-button public-btn">发表学习笔记</a>
	        </div>
	    </div>
    </div>
{template 'loading'}
<script>
var mem_book_id = getCookie('mem_book');
var page = 1;
//下拉加载
var range = -50; //距下边界长度/单位px
var totalheight = 0;
var loading = false;
$(window).scroll(function(){
	if(loading) return false;
	var srollPos = $(window).scrollTop(); //滚动条距顶部距离(页面超出窗口的高度)
	totalheight = parseFloat($('body').height()) + parseFloat(srollPos);
	if(($("body").height()-range) <= totalheight) {
		if(loading) return false;
		page++;
		getList();
	}            
});
function getList(){
	if(loading) return false;
	loading = true;
	$.ajax({
		url:'{php echo $this->murl("mynote")}',
		data: {page:page, id:mem_book_id},
		type: "post",
		success: function(dat){
			dat = JSON.parse(dat);
			if(dat.code==1){
				console.log(dat);
				dat = dat.list;
				var str = '';
				for(var i in dat){
					
		        	str += '<a href="'+dat[i].url+'" class="note-item">';
		        	str += '<div class="note-head">';
		        	str += '<p class="g-text-cut">'+dat[i].title+'</p>';
		        	str += '</div>';
		        	str += '<div class="note-content"><pre class="g-text-cut-3">'+dat[i].content+'</pre>';
		        	str += '</div>';
		        	str += '<div class="g-flex row-between col-center note-footer">';
		        	str += '<p>'+dat[i].createtime+'<span style="margin-left: 4px; margin-right: 4px;"></span></p>';
		        	str += '<div>';
		        	str += '<img src="{RES}img/zan.png">'+dat[i].total;
		        	str += '<div class="" style="display: none;">';
		        	str += '<div class=" like-block">';
		        	str += '<img src="{RES}img/reply.png"><span>+0</span>';
		        	str += '</div>';
		        	str += '</div>';
		        	str += '</div>';
		        	str += '</div>';
		        	str += '</a>';
					
				}
				$('.all-read-note').append(str);
				loading = false;
			}
			else{
				if(page==1) $('.no-note').show()
				loading = true;
			}
		}	
	});	
}
$(function(){
	getList();
})
</script>
    
</body></html>